<template>
	<view class="container">
		<view class="wrapper">
			<view class="welcome">云山供应链用户登录！</view>
			<view class="input-content">
				<view class="input-item">
					<text class="tit">手机号码</text>
					<input type="number" :value="mobile" placeholder="请输入手机号码" maxlength="11" data-key="mobile" @input="inputChange" />
				</view>
				<view class="input-item">
					<text class="tit">密码</text>
					<input
						type="text"
						value=""
						placeholder="6-18位不含特殊字符"
						placeholder-class="input-empty"
						maxlength="20"
						password
						data-key="password"
						@input="inputChange"
						@confirm="toLogin"
					/>
				</view>
			</view>
			<button class="confirm-btn" @click="toLogin" :disabled="logining">登录</button>
			<view class="forget-section" @click="$api.toUrl(`/pages/public/findpwd`)">忘记密码?</view>
		</view>
		<view class="register-section">
			<text @click="$api.toTab(`/pages/index/index`)" style="color: #DD524D; margin-right: 20px;">返回首页</text>
			
			<!-- #ifdef H5 -->
			<text @click="toDownload" style="margin-right: 30upx;">APP下载</text>
			<!-- #endif -->
			
			还没有账号?
			<text @click="$api.toUrl(`/pages/public/register`)">马上注册</text>
		</view>
	</view>
</template>

<script>
import { mapMutations } from 'vuex';

export default {
	data() {
		return {
			mobile: '',
			password: '',
			logining: false
		};
	},
	onLoad() {
		
	},
	computed: {},
	methods: {
		//对全局方法进行监控
		...mapMutations(['login']),

		inputChange(e) {
			const key = e.currentTarget.dataset.key;
			this[key] = e.detail.value;
		},
		navBack() {
			uni.navigateBack();
		},
		toDownload() {
			return window.location.href = "https://gyl.dl.lvaijiankang.com/";
		},
		//点击登录
		async toLogin() {
			this.logining = true;
			const { mobile, password } = this;
			/* 数据验证模块*/
			if (!/(^1[3|4|5|6|7|8|9][0-9]{9}$)/.test(mobile)) {
				this.$helper.toast('请输入正确的手机号码');
				this.logining = false;
				return;
			}
			let regex = /([0-9A-Za-z]{6,18}$)/;
			if (!regex.test(password)) {
				this.$helper.toast('请输入6-18位不含特殊字符');
				this.logining = false;
				return;
			}
			
			const param = {
				mobile,
				password
			};
			await this.$http.request('Login', 'login', 'POST', param, res => {
				this.logining = false;
				if (res.status == 1) {
					if (res.data.error == 0) {
						// 登录成功
						uni.setStorageSync('token', res.data.data.token);
						uni.reLaunch({
							url: '/pages/user/user'
						});
					}
				}
			});
		},
		
		//登录后返回上一页
		back() {
			// #ifdef H5
			const pages = getCurrentPages();
			if (pages.length > 1) {
				uni.navigateBack(1);
				return;
			}
			//使用vue-router返回上一级
			let a = this.$router.go(-1);
			if (a == undefined) {
				//重新定向跳转页面
				uni.reLaunch({
					url: '/pages/user/user'
				});
			}
			return;
			// #endif
			uni.navigateBack(1);
		}
	}
};
</script>

<style lang="scss">
page {
	background: #fff;
}

.container {
	padding-top: 115px;
	position: relative;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background: #fff;
}

.wrapper {
	position: relative;
	z-index: 90;
	background: #fff;
	padding-bottom: 40upx;
}

.back-btn {
	position: absolute;
	left: 40upx;
	z-index: 9999;
	padding-top: var(--status-bar-height);
	top: 40upx;
	font-size: 40upx;
	color: $font-color-dark;
}

.left-top-sign {
	position: relative;
	left: 32upx;
	top: -92upx;

	image {
		width: 400upx;
		height: 133upx;
	}
}

.right-top-sign {
	position: absolute;
	top: 80upx;
	right: -30upx;
	z-index: 95;

	&:before,
	&:after {
		display: block;
		content: '';
		width: 400upx;
		height: 80upx;
		background: #b4f3e2;
	}

	&:before {
		transform: rotate(50deg);
		border-radius: 0 50px 0 0;
	}

	&:after {
		position: absolute;
		right: -198upx;
		top: 0;
		transform: rotate(-50deg);
		border-radius: 50px 0 0 0;
		/* background: pink; */
	}
}

.left-bottom-sign {
	position: absolute;
	left: -270upx;
	bottom: -320upx;
	border: 100upx solid #d0d1fd;
	border-radius: 50%;
	padding: 180upx;
}

.welcome {
	position: relative;
	left: 50upx;
	top: -90upx;
	font-size: 46upx;
	color: #555;
	text-shadow: 1px 0px 1px rgba(0, 0, 0, 0.3);
}

.input-content {
	padding: 0 60upx;
}

.input-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 0 30upx;
	background: $page-color-light;
	height: 120upx;
	border-radius: 4px;
	margin-bottom: 50upx;

	&:last-child {
		margin-bottom: 0;
	}

	.tit {
		height: 50upx;
		line-height: 56upx;
		font-size: $font-sm + 2upx;
		color: $font-color-base;
	}

	input {
		height: 60upx;
		font-size: $font-base + 2upx;
		color: $font-color-dark;
		width: 100%;
	}
}

.confirm-btn {
	width: 630upx;
	height: 76upx;
	line-height: 76upx;
	border-radius: 50px;
	margin-top: 70upx;
	background: $uni-color-primary;
	color: #fff;
	font-size: $font-lg;

	&:after {
		border-radius: 100px;
	}
}

.forget-section {
	font-size: $font-sm + 2upx;
	color: $font-color-spec;
	text-align: center;
	margin-top: 40upx;
}

.register-section {
	position: fixed;
	left: 0;
	bottom: 50upx;
	width: 100%;
	font-size: $font-sm + 2upx;
	color: $font-color-base;
	text-align: center;

	text {
		color: $font-color-spec;
		margin-left: 10upx;
	}
}
</style>
